<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="decorator" content="default" />
<%@ include file="/WEB-INF/views/include/head.jsp"%>
<link rel="stylesheet" href="${ctxStatic}/css/DateTimePicker.css">
<link rel="stylesheet" href="${ctxStatic}/css/layerSm.css">
<script src="${ctxStatic}/DateTimePicker/DateTimePicker.js"></script>
</head>
<script>

    /*初始方法*/
    $(function() {
        // 加结果集式样
        addTitleCss();
        var params = $("#inputForm").serialize();
        // 日期控件
        $("#dtBox1").DateTimePicker({
            dateFormat:"yyyy-MM-dd",
            parentElement:".timeBox",
        });
        // 下拉选框带搜索功能
        $("#orderStatusCD").select2(); 
    })

    /*加结果集式样*/
    function addTitleCss() {
        // 结果集个数
        var resultNumber = $("input[name='styleCategoryCd']").length;

        // 如果结果集个数大于零
        if (resultNumber > 0) {
            var theadW = $('.tabScroll thead').width()
            var theadTh = $('.tabScroll thead tr th').length
            $('.tabScroll thead tr th').width(theadW / theadTh)
            $('.tabScroll tbody tr:first-child td')
                    .each(
                            function() {
                                var indexNum = $(this).index()
                                var tdWidth = $(
                                        '.tabScroll tbody tr:first-child td')
                                        .eq(indexNum).css('width')
                                $('.tabScroll thead tr th').eq(indexNum).width(
                                        tdWidth);
                            })
            $(this).addClass('active')
            $(this).siblings().removeClass('active')
        }else if(resultNumber == 0 ){
            var theadW = $('.tabScroll thead').width()
            var theadTh = $('.tabScroll thead tr th').length
            $('.tabScroll thead tr th').width(theadW/theadTh)
        }
    }

    /*搜索*/
    function searchItem() {

        var params = $("#searchForm").serialize();

        $.post("${ctx}/order/order/myRefOrderList", params,
                function(result) {
                    // 显示结果集
                    var h = $(callBackHtml(result)).find("#infoList").html();
                    $('#infoList').html(h);

                    var theadW = $('.tabScroll thead').width()
                    var theadTh = $('.tabScroll thead tr th').length
                    $('.tabScroll thead tr th').width(theadW / theadTh)
                    $('.tabScroll tbody tr:first-child td').each(
                            function() {
                                var indexNum = $(this).index()
                                var tdWidth = $(
                                        '.tabScroll tbody tr:first-child td')
                                        .eq(indexNum).css('width')
                                $('.tabScroll thead tr th').eq(indexNum).width(
                                        tdWidth);
                            })

                    $('tbody tr').on('click', function() {

                        $(this).addClass('active')
                        $(this).siblings().removeClass('active')
                    })
                    // 加结果集式样
                    addTitleCss();
                }, 'html');

    }
    
    /*选择*/
    function chooseItem() {

        var items = $(".active");
        if (items.length == 0) {
            // 请选择项目！
            layer.msg('<spring:message code="order_please_choose_item"/>', {time:1000}); 
            return;
        }
        
        // 向父页面加载值
        window.parent.frames[0].refOrderInfo(items);
        // 关闭当前页面
        closeWin();

    }

</script>
<!--头部-->
<div class="myshop clearfix">
    <!-- 选择订单 -->
    <p class="myshoptop fl"><spring:message code="order_choose_order"/></p>
    <div class="fr">
        <div class="topBtnClose" onclick="closeWin()">
            <img src="${ctxStatic}/images/btn-close.png">
        </div>
    </div>
</div>

<div class="middle myshop_middleSm">
    <div class="clearfix">
        <form id="searchForm">
            <!-- 隐藏变量 -->
            <div class="searchLeft clearfix">
                <div class="searchSm clearfix">
                    <!-- 订单号 -->
                    <p class="searchTxt"><spring:message code="order_orderNo"/></p>
                    <div class="searchInp">
                        <input name="orderNO" value="${order.orderNO}">
                    </div>
                </div>
                <div class="searchSm clearfix">
                    <!-- 客户电话 -->
                    <p class="searchTxt"><spring:message code="order_customerTele"/></p>
                    <div class="searchInp">
                        <input name="mobile" value="${order.mobile}">
                    </div>
                </div>
                <div class="searchSm clearfix">
                    <!-- 订单日期 -->
                    <p class="searchTxt"><spring:message code="order_orderDate"/></p>
                    <div class="searchInp">
                        <div class="timeBox timeBoxSm">
                            <input type="text" name="createDateStr" data-field="date" maxlength="50" class="form-control time" readonly value="<fmt:formatDate value="${order.createDateStr}" pattern="yyyy-MM-dd HH:mm"/>">
                        </div>
                    </div>
                </div>
                <div class="searchSm clearfix">
                    <!-- 状态 -->
                    <p class="searchTxt"><spring:message code="order_state"/></p>
                    <div class="searchInp">
                            <c:set value="<%=ResourcesUtil.getConfig(\"order_status\")%>" var="orderStatusList" />
                            <select style="width:150px"  class="form-control sex" id="orderStatusCD" name="orderStatusCD" >
                                <option value=''><spring:message code="order_please_input_state"/></option>
                                <c:forEach items="${fns:getDictList(orderStatusList)}" var="item">
                                    <option value="${item.itemCode}-${item.itemValue}" <c:if test="${fn:split(order.orderStatusCD,'-')[1] eq item.itemValue}">selected="selected"</c:if>>${item.itemName}</option>
                                </c:forEach>
                            </select>
                    </div>
                </div>
            </div>
            <div class="searchRight">
                <!-- 选择 -->
                <button type="button" class="btn-cj" onclick="chooseItem()"><spring:message code="order_choose"/></button>
                <!-- 重置 -->
                <button type="reset" class="btn-js" ><spring:message code="common_reset"/></button>
                <!-- 检索 -->
                <button type="button" class="btn-js" onclick = "searchItem()"><spring:message code="commom_check"/></button>
            </div>
            <div id="dtBox1"></div>
        </form>
    </div>
    <div class="clearfix">
        <!-- 项目列表 -->
        <p class="data_id"><spring:message code="order_item_list"/></p>
    </div>
    <div class="tableBox tableList">
        <div class="tableSm orderSelectBox">
            <div class="tabScroll" style="height:500px;" id="infoList">
                <table cellpadding="0">
                    <thead>
                        <tr>
                            <!-- No. -->
                            <th><spring:message code="order_No"/></th>
                            <!-- 标记 -->
                            <th><spring:message code="order_mark"/></th>
                            <!-- 订单号 -->
                            <th><spring:message code="order_orderNo"/></th>
                            <!-- 客户姓名 -->
                            <th><spring:message code="order_customer_name"/></th>
                            <!-- 状态 -->
                            <th><spring:message code="order_state"/></th>
                            <!-- 款式类别 -->
                            <th><spring:message code="order_style_category"/></th>
                            <!-- 试穿号码 -->
                            <th><spring:message code="order_size"/></th>
                            <!-- 面料 -->
                            <th><spring:message code="order_material"/></th>
                            <!-- 数量 -->
                            <th><spring:message code="order_number"/></th>
                            <!-- 售价 -->
                            <th><spring:message code="order_sales_price"/></th>
                            <!-- 天数 -->
                            <th><spring:message code="order_days"/></th>
                            <!-- 预计交付日 -->
                            <th><spring:message code="order_estimated_delivery_date"/></th>
                            <!-- 最终交付日 -->
                            <th><spring:message code="order_final_delivery_date"/></th>
                            <!-- 创建人 -->
                            <th><spring:message code="order_createUser"/></th>
                            <!-- 创建日期 -->
                            <th><spring:message code="order_createDate"/></th>
                        </tr>
                    </thead>
                    <tbody>
                      
                        <c:forEach items="${orderList}" var="item" varStatus="status">
                            <tr>
                                <!-- NO. -->
                                <td width="40">
                                    <p>${status.index + 1}</p>
                                    
                                </td>
                                <!-- 标记 -->
                                <td style="min-width:40px;">
                                    <!-- 正常 -->
                                    <c:if test="${fn:split(item.urgentCD,'-')[1] eq '10'}">
                                        <img src="${ctxStatic}/images/icon-01.png" class="orderListImg">
                                    </c:if>
                                    <!-- 加急 -->
                                    <c:if test="${fn:split(item.urgentCD,'-')[1] eq '20'}">
                                        <img src="${ctxStatic}/images/icon-02.png" class="orderListImg">
                                    </c:if>
                                </td>
                                <!-- 订单号 -->
                                <td>
                                    <%-- <p class="show" onclick='window.location.href="${ctx}/order/createOrder/form?id=${item.id}"'>${item.orderNO}</p> --%>
                                    <p data-toggle="tooltip" title="${item.orderNO}">${item.orderNO}</p>
                                    <!-- 隐藏变量 -->
                                    <input type="hidden" name="orderNO" value="${item.orderNO}"/>
                                    <input type="hidden" name="refOrderId" value="${item.id}"/>
                                    <input type="hidden" name="styleId" value="${item.styleId}"/>
                                    <input type="hidden" name="styleCategoryCd" value="${item.styleCategoryCD}"/>
                                    <input type="hidden" name="fabricId" value="${item.fabricId}"/>
                                    <input type="hidden" name="fitCD" value="${item.fitCD}"/>
                                    <input type="hidden" name="styleMakeType" value="${item.styleMakeCD}"/>
                                    <input type="hidden" name="styleSizeGroupCd" value="${item.sizeGroupCD}"/>
                                    <input type="hidden" name="styleSizeCd" value="${item.sizeCD}"/>
                                    <input type="hidden" name="styleYear" value="${item.styleYear}"/>
                                    <input type="hidden" name="styleSeason" value="${item.styleSeason}"/>
                                </td>
                                <!-- 客户姓名 -->
                                <td style="min-width:50px;">
                                    <p >${item.customerName}</p>
                                </td>
                                <!-- 状态 -->
                                <td>
                                    <p>${fns:getDictName(item.orderStatusCD)}</p>
                                </td>
                                <!-- 款式类别 -->
                                <td>
                                    <p>${fns:getDictName(item.styleCategoryCD)}<input name="styleCategoryCd" type="hidden"/></p>
                                </td>
                                <!-- 试穿号码 -->
                                <td style="min-width:50px;">
                                    <p>${fns:getDictName(item.sizeCD)}</p>
                                </td>
                                <!-- 面料名称 -->
                                <td>
                                    <p title="${item.fabricName}">${item.fabricName}</p>
                                </td>
                                <!-- 数量 -->
                                <td >
                                    <p>${item.orderMaterialNumber}</p>
                                </td>
                                <!-- 售价 -->
                                <td>
                                    <p>${item.orderDesignPrice}</p>
                                </td>
                                <!-- 天数 -->
                                <td style="min-width:40px;">
                                    <p>${item.orderDays}</p>
                                </td>
                                <!-- 预计交付日 -->
                                <td style="min-width:110px;">
                                    <p><fmt:formatDate value="${item.targetDate}" pattern="yyyy-MM-dd HH:mm" /></p>
                                </td>
                                <!-- 最终交付日 -->
                                <td style="min-width:110px;">
                                    <p><fmt:formatDate value="${item.targetDate}" pattern="yyyy-MM-dd HH:mm" /></p>
                                </td>
                                <!-- 创建人 -->
                                <td>
                                    <p>${item.createUserName}</p>
                                </td>
                                <!-- 创建日期 -->
                                <td style="min-width:100px;">
                                    <p><fmt:formatDate value="${item.createDate}" pattern="yyyy-MM-dd HH:mm" /></p>
                                </td>
                            </tr>
                        </c:forEach>
                    </tbody>
                </table>
                <c:if test="${empty orderList}" >
                    <div class="tableNone">
                       <img src="${ctxStatic}/images/icon-03.png" height="20"> <spring:message code="There_is_no_data"/>
                    </div>
                </c:if>
            </div>
        </div>
    </div>

</div>
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/layer.js"></script>
<script src="js/layerStyle.js"></script>

<script>
// 由于样式问题，javascript放在上面写，css效果显示不出
    var windowH = window.innerHeight
            ||document.documentElement.clientHeight
            ||document.body.clientHeight
    $('.middle').css('height',windowH - 40);

    $('tbody tr').on('click',function(){
        $(this).addClass('active')
        $(this).siblings().removeClass('active')
    })

    window.onload = function(){
        var theadW = $('.tabScroll thead').width()
        var theadTh = $('.tabScroll thead tr th').length
        $('.tabScroll thead tr th').width(theadW/theadTh)
        $('.tabScroll tbody tr:first-child td').each(function(){
            var indexNum = $(this).index()
            var tdWidth = $('.tabScroll tbody tr:first-child td').eq(indexNum).css('width')
            $('.tabScroll thead tr th').eq(indexNum).width(tdWidth);
        })

    }
</script>
</body>
</html>